<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <template #empty>
        <span>
          <p>暂无数据</p>
        </span>
      </template>
    </vxe-grid>

    <el-dialog v-model="dialogFormVisible" title="查询记录" width="700">
      <vxe-form :data="formConfig.data">
        <vxe-form-item title="名称" field="name" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.name" placeholder="请输入名称" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="性别" field="sex" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
              <vxe-option value="1" label="女" />
              <vxe-option value="2" label="男" />
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item>
          <template #default>
            <vxe-button type="submit" status="primary" content="默认尺寸" />
          </template>
        </vxe-form-item>
      </vxe-form>

      <el-form :model="form">
        <el-form-item label="Promotion name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Zones" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="Please select a zone">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="configCancel">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"> 下一步</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import type { VxeGridProps } from 'vxe-table'

import { VxeUI, VxeFormInstance, VxeFormEvents } from 'vxe-pc-ui'
import { any } from 'vue-types'
import { SnWidgetItemType } from '@/components/FormCreate/src/config/SerialNumber/UseSerialNumberRule'
import {
  DataTableProp,
  FieldIgnoreType,
  FormCreateVxeControlTypeMapping
} from '@/components/FormCreate/src/config/vxetable/UseVxeTableRule'
import {FormCreateRule2Tbl, VxeTableColumn} from "@/api/res/FormDsgn/DataTable/DataTable";

defineOptions({
  name: 'DataTable'
})

const props = withDefaults(defineProps<DataTableProp>(), {
  apiAddress: '',
  modelValue: ''
})

const controlRef = props.formCreateInject

const dialogFormVisible = ref(true)

const formLabelWidth = '140px'

const gridLoading = ref(false)

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

interface RowVO {
  name: string
  role: string
  sex: string
  age: number
  content: string
}

// let newColumnsList = ref([])

let newRowList = ref([])
const loadColumConfig = () => {
  // 模拟后台接口
  gridOptions.loading = true
  setTimeout(() => {
    gridOptions.columns = [
      { type: 'seq', width: 70 },
      { field: 'name', title: 'Name' },
      { field: 'role', title: 'Role' },
      { field: 'age', title: 'Age' }
    ]
    gridOptions.data = []
    gridOptions.loading = false
  }, 500)
}

const loadColumData = () => {
  // 模拟后台接口
  gridOptions.loading = true
  setTimeout(() => {
    gridOptions.columns = [
      { type: 'seq', width: 70 },
      { field: 'name', title: 'Name' },
      { field: 'sex', title: 'Sex' },
      { field: 'age', title: 'Age' },
      { field: 'address', title: 'Address', showOverflow: true }
    ]
    gridOptions.data = [
      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
      { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
    ]
    gridOptions.loading = false
  }, 500)
}

const formConfig = ref({
  data: {},
  items: [
    {
      itemRender: {
        name: 'VxeButtonGroup',
        options: [
          { type: 'submit', content: '搜索', status: 'primary', size: 'mini' },
          { type: 'reset', content: '重置', size: 'mini' }
        ]
      }
    }
  ]
})

const gridOptions = reactive<VxeGridProps<RowVO>>({
  rowConfig: {
    useKey: true
  },
  sortConfig: {
    multiple: true
  },
  // formConfig: formConfig,
  height: '100%',
  minHeight: '200px',
  stripe: true,
  loading: gridLoading,
  rowConfig: {
    isCurrent: true,
    isHover: true
  },
  minWidth: '200px',
  columnConfig: {
    resizable: true,
    resizableConfig: {
      isDblclickAutoWidth: true
    },
    useKey: true
  },
  columns: [],
  data: newRowList
})

const configCancel = () => {
  dialogFormVisible.value = false
}

onMounted(() => {
  const rules = controlRef.api.fields()
  const newColumnsList: VxeTableColumn[] = []
  for (let key in rules) {
    if (rules.hasOwnProperty(key)) {
      const objectRef = rules[key]
      const fieldObj = controlRef.api.getRule(objectRef)
      const fieldType = fieldObj.type
      if (fieldType === FieldIgnoreType.DataTable) {
        // 序列号控件
        continue
      }
      // formConfig.value.data[colName] = ''

      let controlColModel = {
        field: fieldObj.field,
        title: fieldObj.title,
        sortable: true,
        minWidth: 100
      }

      // if(FormCreateVxeControlTypeMapping[fieldType]){
      //   controlColModel.type = FormCreateVxeControlTypeMapping[fieldType]
      // }
      // type: FormCreateVxeControlTypeMapping[fieldObj.type],
      newColumnsList.push(controlColModel)
    }
  }


  // gridOptions.formConfig = formConfig
  gridOptions.columns =  newColumnsList
  gridOptions.data = newRowList
  dialogFormVisible.value = false
})
</script>
